<template>
  <div>
    <!--导航栏-->
    <div class="content">
      <!-- 个人资料 -->
      <div class="personInfoWrap">
        <div class="prompt">
          <span class="promptFont">个人资料</span>
        </div>
        <div class="userinfoWrap">
          <div class="userinfo_cell">
            <div class="title">持卡人</div>
            <div class="txt">{{data.username&&data.username.slice(0,1)}} **</div>
          </div>
          <div class="userinfo_cell">
            <div class="title">身份证</div>
            <div class="txt">************ {{data.idCardNo}}</div>
          </div>
          <div class="userinfo_cell">
            <div class="title">手机号</div>
            <div class="txt">{{data.telphone}}</div>
          </div>
        </div>
      </div>
      <div
        @click="toLogOut"
        class="btn"
      >注销</div>
    </div>
  </div>
</template>

<script>
import { Field, Button, Dialog } from 'vant';
export default {
  data() {
    return {
      data: {}
    };
  },
  mounted() {
    this.personInfo();
  },
  methods: {
    // 个人资料
    personInfo() {
      this.$http.post('/tuser/userInfo').then(res => {
        console.log(res);
        if (res.data.code === '0') {
          this.data = res.data.object;
        } else {
          Dialog.alert({
            confirmButtonColor: '#28b46a',
            title: '提示',
            message: res.data.message
          }).then(() => {
            this.$router.go(-1);
          });
        }
      });
    },
    toLogOut() {
      Dialog.alert({
        confirmButtonColor: '#28b46a',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        title: '提示',
        message: '您确定要注销该账户吗?'
      }).then(() => {
        this.$http.post('/tuser/cancel').then(res => {
          console.log(res);
          this.$router.replace('/home');
        });
      });
    }
  },
  components: {
    'van-field': Field,
    'van-button': Button
  }
};
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  overflow: hidden;
  .btn {
    width: 690px;
    height: 88px;
    margin: 0px auto;
    background-color: white;
    text-align: center;
    line-height: 88px;
    color: red;
    font-size: 32px;
    border-radius: 8px;
  }
}
// 个人资料容器
.personInfoWrap {
  // margin: 30px;
  padding: 30px;
  border-radius: 20px;
}
// 个人资料内容容器
.userinfoWrap {
  border-radius: 8px;
}
// 客户经理
.manageWrap {
  // padding: 0 30px;
  margin: 0 30px;
  background-color: #ffffff;
  border-radius: 8px;
}
.promptNew {
  width: 100%;
  // margin-top: 34px;
  // margin-bottom: 300px;
  padding-bottom: 192px;
  padding-top: 125px;
  background-color: #ffffff;
  // border-bottom: 1px solid #ebebeb;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.promptWrap {
  padding-bottom: 50px;
}
// 客户经理容器
.promptManage {
  border-bottom: 1px solid #ebebeb;
  padding: 30px;
  display: flex;
  img {
    width: 74px;
    height: 75px;
  }
  .manageTxt {
    display: flex;
    flex-direction: column;
    padding-left: 23px;
    .nameTxt {
      font-size: 28px;

      color: #363636;
    }
    .manageNum {
      font-size: 24px;
      color: #989898;
    }
  }
}

// 粉丝统计容器
.showqrCode {
  padding: 20px 30px 10px;
}
.prompt {
  width: 100%;
  // margin-top: 34px;
  // margin-bottom: 2px;
  // margin-left: 31px;
  padding-left: 30px;
  padding-top: 25px;
  background-color: #ffffff;
  border-bottom: 1px solid #ebebeb;
  border-radius: 8px;
}
.Pic {
  width: 167px;
  height: 168px;
}
.promptFont {
  // padding-left: 30px;
  padding-top: 15px;
  height: 27px;
  @include sc(28px, #7f7f7f);
}
.btnBottom {
  border-top: 1px solid #ebebeb;
}
.userinfo_cell {
  height: 65px;
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  // align-items: center;
  // padding: 20px 30px 20px 20px;
  padding-top: 10px;
  padding-left: 30px;
  padding-right: 20px;
  font-size: 28px;
  position: relative;
  // 二维码
  .qrcodeWrapper {
    display: flex;
    color: #398aff;
    position: absolute;
    left: 32%;
  }
  .title {
    width: 190px;
    color: #989898;
  }
  .txt {
    // margin-left: 30px;
    color: #000000;
  }
  .txt2 {
    word-break: break-all; // 解决文字长度太长往前跑
    width: 6rem;
  }
  .right {
    // position: absolute;
    // right: 50px;
    width: 39px;
    height: 39px;
    // top: 15px;
    margin-right: 20px;
    img {
      width: 100%;
    }
  }
}
.footer {
  height: 150px;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  padding-left: 74px;
  padding-right: 48px;
  .left {
    // width: 340px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .item {
      display: flex;
      align-items: center;
      flex-direction: column;
      width: 115px;
      .number1 {
        @include sc(38px, #05a72f);
      }
      .number2 {
        @include sc(38px, #ff0000);
      }
      .txt {
        @include sc(28px, #989898);
      }
    }
  }
  .right {
    @include sc(32px, #3889ff);
  }
}
.van-button--large {
  width: 92%;
  display: block;
  margin: 10px auto;
  color: red;
  border-radius: 8px;
}
</style>
